<template>
	<footer class="footer">
		<div class="maxW">
			<div class="i_footerBox clear" v-if="getPath">
				<div class="i_address fl">
					<ul>
						<li id="info_address">地址：{{ info.info_address ? info.info_address : '暂无' }}</li>
						<li id="info_email">邮箱：{{ info.info_email ? info.info_email : '暂无' }}</li>
						<li id="info_phone">联系电话：{{ info.info_phone ? info.info_phone : '暂无' }}</li>
					</ul>
				</div>
				<div class="i_friendlyLink fr">
					<div class="i_friendlyLink1" id="info_link">
						<router-link :to="{ path: '/home/guide', query: { type: 1 } }">操作手册</router-link>
						<router-link :to="{ path: '/home/guide', query: { type: 2 } }">常见问题</router-link>
						<router-link :to="{ path: '/home/guide', query: { type: 3 } }">意见反馈</router-link>
					</div>
					<div class="i_friendlyLink2" id="friendly_link_list_tab">
						<template v-for="(item, index) in pageFootData.friend_link">
							<a :key="index" :href="item.link" target="_blank">{{ item.name }}</a>
						</template>
					</div>
				</div>
			</div>
			<div class="i_copyright">{{ info.info_copyright }}</div>
		</div>
	</footer>
</template>
<script>
export default {
	data() {
		return {
			pageFootData: {},
			info: {}
		};
	},
	created() {
        this.getPageFootData();
        // 方便日常调试使用
     
    },
	computed: {
		getPath: function() {
			return this.$route.path == '/' || this.$route.path == '/home' || this.$route.path == '/home/homeindex' ? true : false;
		}
	},
	methods: {
		getPageFootData() {
			let success = res => {
				this.pageFootData = res.data;
				this.info = res.data.info;
			};
			this.$ajax({
				url: 'api/setting/page_foot',
				method: 'get',
				params: {},
				func: {
					success: success
				}
			});
        },

	}
};
</script>

<style lang="scss">
.footer {
	background-color: #3a486f;
}

.i_footerBox {
	padding: 20px 0;
	font-size: 14px;
	color: #ffffff;
	border-bottom: 1px dashed #697798;
}

.i_address {
	width: 35.75%;
	border-right: 1px dashed #697798;
}
.i_address > ul > li {
	line-height: 19px;
}
.i_address > ul > li:nth-of-type(2) {
	padding: 20px 0;
}

.i_friendlyLink {
	width: 60%;
}

.i_friendlyLink1 {
    margin-bottom: 40px;
	text-align: center;
}
.i_friendlyLink1 > a {
	display: inline-block;
	vertical-align: top;
	color: #ffffff;
	border-right: 1px solid #969696;
	width: 26.38889%;
	line-height: 19px;
}
.i_friendlyLink1 > a:last-of-type {
	border: 0;
}

.i_friendlyLink2 {
	text-align: center;
}
.i_friendlyLink2 > span {
	line-height: 19px;
}
.i_friendlyLink2 > a {
	display: inline-block;
	vertical-align: top;
	color: #a2b2d5;
	line-height: 19px;
	padding-left: 25px;
}

.i_copyright {
    height: 44px;
    line-height: 44px;
	color: #fff;
	text-align: center;
	white-space:pre;
}
</style>
